<template>
  <en-table-layout :tableData="tableData" :loading="loading" :height="height" stripe :header-cell-style="{textAlign: 'center'}" :style="{width: '100%'}">
    <div slot="toolbar" class="inner-toolbar">
      <div class="toolbar-btns">
        <el-button type="primary" @click="handleExport()">导出退补明细</el-button>
      </div>
      <div class="toolbar-search">
        <en-table-search 
        @search="searchEvent" 
        @advancedSearch="advancedSearchEvent" 
        advanced 
        advancedWidth="350"
        placeholder="请输入订单号">
          <template slot="advanced-content">
            <el-form :model="advancedForm" ref="advancedForm" label-width="80px">
              <el-form-item label="流水号:" prop="sn" class="toolbar-input">
                <el-input v-model="advancedForm.sn" placeholder="请输入流水号" clearable />
              </el-form-item>
              <el-form-item label="订单号:" prop="order_sn">
                <el-input v-model="advancedForm.order_sn" placeholder="请输入订单号" clearable />
              </el-form-item>
              <el-form-item label="退补类型:" prop="refund_type">
                <el-select v-model="advancedForm.refund_type" placeholder="请选择退补类型" clearable>
                  <el-option v-for="(item,index) in refundTypes" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="退补原因:" prop="refund_reason">
                <el-select v-model="advancedForm.refund_reason" placeholder="请选择退补原因" clearable>
                  <el-option v-for="(item,index) in refundReasons" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="退补状态:" prop="refund_status">
                <el-select v-model="advancedForm.refund_status" placeholder="请选择退补状态" clearable>
                  <el-option v-for="(item,index) in refundStates" :key="index" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </template>
        </en-table-search>
      </div>
    </div>
    <template slot="table-columns">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="sn" label="退补流水号" min-width="120">
        <template slot-scope="scope">{{scope.row.sn}}</template>
      </el-table-column>
      <el-table-column prop="order_sn" label="订单号" min-width="120" />
      <el-table-column label="退补状态" min-width="100">
        <template
          slot-scope="{ row }">{{ row.refund_status === 'APPLY' ? '已申请' : row.refund_status === 'COMPLETED' ? '已完成' : '已失败' }}</template>
      </el-table-column>
      <el-table-column prop="refund_type" label="退补类型" min-width="100" />
      <el-table-column prop="refund_price" label="退补金额" min-width="100" />
      <el-table-column prop="refund_reason" label="退补原因" min-width="100" />
      <el-table-column prop="refund_title" label="退补标题" min-width="120" />
      <el-table-column prop="refund_introductions" label="退补说明" min-width="200" />
      <el-table-column prop="refund_description" label="退补描述" min-width="200" />
      <el-table-column prop="refund_time" label="退补时间" min-width="135" />
      <el-table-column prop="operator" label="操作用户" min-width="120" />
    </template>
    <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
      @current-change="handlePageCurrentChange" 
      :current-page="params.page_no" 
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.page_size" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="params.data_total">
    </el-pagination>
  </en-table-layout>
</template>

<script>
  import * as API_ORDER from '@/api/order';

  export default {
    data() {
      return {
        // 列表loading状态
        loading: false,
        // 列表参数
        params: {
          page_no: 1,
          page_size: 10,
          data_total: 0,
          refund_type: 'SPREAD_REFUND'
        },
        advancedForm: {
          RefundReason: 'SPREAD_REFUND'
        },
        // 列表数据
        tableData: [],
        refundTypes: [
          {
            label: '多付退款',
            value: 'SPREAD_REFUND'
          }
          // {
          //   label: '少付补款',
          //   value: '少付补款'
          // }
        ],
        refundReasons: [
          {
            label: '重量误差',
            value: 'WEIGHT_ERROR'
          },
          {
            label: '价格错误',
            value: 'PRICE_ERROR'
          },
          {
            label: '活动优惠',
            value: 'PREFERENTIAL_ACTIVITIES'
          }
        ],
        refundStates: [
          {
            label: '已申请',
            value: 'APPLY'
          },
          {
            label: '已完成',
            value: 'COMPLETED'
          },
          {
            label: '已失败',
            value: 'REFUNDFAIL'
          }
        ]
      }
    },
    computed: {
      height() {
        return document.documentElement.clientHeight - 225 + 'px';
      }
    },
    mounted() {
      this.getPageData();
    },
    methods: {
      /**
       * @date 2020/09/03
       * @author kaiqiang
       * @description { 获取表格数据 }
       */
      getPageData() {
        this.loading = true;
        API_ORDER.getRetreatList(this.params).then((response) => {
          this.tableData = response.data;
          this.params.data_total = response.data_total;
          this.loading = false;
        }).catch((error) => {
          console.log(error)
          this.loading = false;
        })
      },
      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size;
        this.getPageData();
      },
      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page;
        this.getPageData();
      },
      /**
       * @date 2020/09/04
       * @author kaiqiang
       * @description { 导出退补明细 }
       */
      handleExport() {
        delete this.params.data_total;
        API_ORDER.getExportList(this.params).then((response) => {
          // 处理返回的文件流
          let blob = new Blob([response], {
            type: 'application/vnd.ms-excel;charset=utf-8'
          });
          let date = new Date().getFullYear() + '' + (new Date().getMonth() + 1) + '' + new Date().getDate();
          const fileName = date + name + '退补明细导出.xlsx';
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        })
      },
      /**
        * @date 2020/09/04
        * @author kaiqiang
        * @description { 模糊查询 }
      */
      searchEvent(data) {
        this.params = {
          ...this.params,
          order_sn: data
        }
        this.params.page_no = 1;
        this.getPageData(); 
      },
      /**
         * @date 2020/09/04
         * @author kaiqiang
         * @description { 高级模糊查询 }
       */
      advancedSearchEvent() {
        this.params = {
          ...this.params,
          ...this.advancedForm
        }
        this.params.page_no = 1;
        this.getPageData();
      }
    }
  }

</script>

<style type="text/scss" lang="scss" scoped>
  /deep/ div.toolbar {
    height: 100%;
  }
  /deep/ .el-select {
    display: block;
  }
  .select-item {
    padding-top: 20px;
    .select-name {
      padding: 10px;
      margin-left: 10px;
      font-size: 12px;
    }
  }
  .refund_Excel {
    padding-bottom: 10px;
  }
  .toolbar-btns,
  .toolbar-search {
    margin: 10px
  }
</style>
